去年，首次踏進軟體業，面對陌生的領域，怎麼也沒想到，最後會拿起 Playwright 之劍，在 E2E 測試領域披荊斬棘。

這是怎麼發生的呢？一切都還得從公司的專案說起...

面對一個經年累月的大型 web application 專案，前端與後端的夥伴們，針對大部分新添加的功能，盡力讓測試覆蓋率達成百分之百，後端的 Legacy Code，也在功能重構時，持續增加測試，最不足的就是前端 Legacy Code，幾乎都仰賴人工測試。但是，我們專案的模組多達 20 個，每個模組有幾十個至上百個功能，模組之間又有幾個至幾十個交互作用的功能與設定，如果都依靠人工測試，要如何在新功能上線前做完回歸測試，確保新功能的加入不會影響舊功能呢？

就在這樣的機緣背景之下，我們團隊決定加入 E2E 測試，模擬真實使用者操作網頁的過程，以驗證流程與品質是否符合需求，在導入 E2E 測試之前，針對專案特性嘗試過許多測試框架、測試工具，經過評估，最終選定 Playwright 作為建立 E2E 測試的根基。

然而，在搜尋 Playwright 相關資源時，大多數中文的文章偏向入門、點到為止，如果想了解更深入的應用只能往英文資源尋找，雖然 Playwright 官方文件已非常清楚，但對於一個新手小白來說，仍是一頭霧水。

直至2024年9月首次出現較完整的課程，是由多奇教育 Will 保哥直播的【實戰 E2E 測試：使用 Playwright 測試框架】，同時 Will 保哥也協助翻譯了官網(Playwright 官網中文版)，至此，終於有比較方便入門的中文資源。

因此，希望將我這一年來，從陌生探索到與 Playwright 並肩作戰的過程，透過30天的分享，讓大家更加認識這個測試工具。

各位玩家們，讓我們跟著以下的探索地圖，一起展開 30 天的冒險之旅吧！

第一階段：新手村的試煉 (LV 2-7)

• Day 2：挑選適合的武器｜Playwright、Cypress、Selenium 的優劣對決！
• Day 3：建立你的基地｜初始化專案與 config 神器
• Day 4：技能的施放｜Playwright 測試的四種攻擊模式 (CLI / Debug / UI / Extension)
• Day 5：鎖定目標｜元素定位術入門
• Day 6：精準打擊｜Assertion 斷言的設計與陷阱
• Day 7：戰鬥儀式｜before/describe/after 魔法陣的佈置與回收

第二階段：工匠與鍊金術 (LV 8-11)

• Day 8：被動神技｜Playwright 與生俱來的「自動等待」詠唱術
• Day 9：撰寫你自己的魔導書｜Page Object Model 的傳承
• Day 10：神器再進化｜playwright.config.ts 的進階天賦
• Day 11：百變神行｜模擬手機與平板，跨裝置的變身術

第三階段：初階副本的挑戰 (LV 12-17)

• Day 12：破解隱形敵人與敵軍陣列｜如何鎖定沒有「真名」的怪物
• Day 13：群體控制技｜表格中重複怪物的定位技巧
• Day 14：獻上素材與獲取秘方｜處理檔案的上傳與下載
• Day 15：拆除警報陷阱｜dialog / page.on 實戰應用
• Day 16：耐心是一種美德｜expect.poll 等待延遲出現的寶箱
• Day 17：破解時間牢籠｜用 Promise.race 逃離卡死的詛咒

第四階段：打造自動化兵工廠 (LV 18-21)

• Day 18：召喚僕從(一)｜用 Github Actions 實現 24 小時自動練功
• Day 19：召喚僕從(二)｜用 GitLab CI 實現 24 小時自動練功
• Day 20：打造移動兵工廠｜用 Docker 建立測試環境
• Day 21：撰寫英雄史詩｜生成華麗的戰報 (Test Reports) 並分享

主線任務：勇闖電商之城 (LV 22-26)

• Day 22：【主線任務 I】跨界之旅｜使用「storageState」搞定登入與身分驗證管理
• Day 23：【主線任務 II】潛入市集｜實戰商品瀏覽與搜尋功能測試
• Day 24：【主線任務 III】金庫的考驗｜挑戰購物車新增、刪除與數量變更
• Day 25：【主線任務 IV】鏡像世界的挑戰｜處理彈出視窗與 iframe 內嵌廣告
• Day 26：【主線任務 V】最終的交易｜完成結帳流程與訂單驗證

團隊副本：從前端、測試到 DevOps

• Day 27：【團隊副本】三人合力！挑戰前端的魔法構件 (Web Component)與 DevOps 的自動化結界 (CI/CD)

最終通關：魔王關前的冥想 (LV 28-30)

• Day 28：對抗混沌魔法｜馴服不穩定咒語 (Flaky Test) 的策略
• Day 29：初階冒險者的血淚史｜我中過的詛咒與你可以避開的 Debuff
• Day 30：破關，也是新的冒險！Playwright 只是第一個伺服器，玩家的旅程永不終結